<template>
  <div class="ranking-page">
    <div class="page-header">
      <div class="header-content">
        <button class="back-btn" @click="router.back()">← 返回</button>
        <h1>排行榜</h1>
      </div>
    </div>

    <div class="ranking-container">
      <!-- 侧边导航 -->
      <div class="ranking-sidebar">
        <div 
          v-for="tab in tabs" 
          :key="tab.type"
          class="sidebar-item"
          :class="{ active: currentType === tab.type }"
          @click="switchTab(tab.type)"
        >
          <span class="icon">{{ tab.icon }}</span>
          <span class="text">{{ tab.name }}</span>
        </div>
      </div>

      <!-- 榜单内容 -->
      <div class="ranking-content">
        <div class="content-header">
          <h2>{{ currentTabName }}</h2>
          <span class="update-time">每日更新</span>
        </div>

        <div v-if="loading" class="loading-state">
          <div class="spinner"></div>
          <p>正在加载榜单数据...</p>
        </div>

        <div v-else-if="error" class="error-state">
          <p>{{ error }}</p>
          <button @click="loadRanking">重新加载</button>
        </div>

        <div v-else class="ranking-list">
          <div 
            v-for="(item, index) in rankingList" 
            :key="item.productId"
            class="ranking-item"
            @click="viewProduct(item)"
          >
            <div class="rank-badge" :class="getRankClass(index)">
              {{ index + 1 }}
            </div>
            
            <div class="item-image">
              <img :src="item.imageUrl || defaultImage" :alt="item.productName">
            </div>

            <div class="item-info">
              <h3 class="item-name">{{ item.productName }}</h3>
              <div class="item-meta">
                <span class="platform-tag" v-if="item.platformName">{{ item.platformName }}</span>
                <span class="score-tag">综合得分 {{ item.score?.toFixed(1) }}</span>
              </div>
              <div class="item-price">¥{{ item.price }}</div>
            </div>

            <div class="item-action">
              <button class="view-btn">查看详情</button>
            </div>
          </div>
          
          <div v-if="rankingList.length === 0" class="empty-state">
            暂无榜单数据
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getRecommendRanking, getNewProductRanking, getValueRanking } from '@/api'

const router = useRouter()
const route = useRoute()

const tabs = [
  { type: 'recommend', name: '月热销榜', icon: '🔥' },
  { type: 'new-product', name: '好评榜', icon: '👍' },
  { type: 'value', name: '好价榜', icon: '💰' }
]

const currentType = ref(route.query.type || 'recommend')
const rankingList = ref([])
const loading = ref(false)
const error = ref('')
const defaultImage = 'https://via.placeholder.com/200x200?text=商品图片'

const currentTabName = computed(() => {
  const tab = tabs.find(t => t.type === currentType.value)
  return tab ? tab.name : '排行榜'
})

const getRankClass = (index) => {
  if (index === 0) return 'rank-1'
  if (index === 1) return 'rank-2'
  if (index === 2) return 'rank-3'
  return 'rank-other'
}

const switchTab = (type) => {
  if (currentType.value === type) return
  currentType.value = type
  router.replace({ query: { ...route.query, type } })
  loadRanking()
}

const loadRanking = async () => {
  loading.value = true
  error.value = ''
  rankingList.value = []

  try {
    let response
    const limit = 50 // 获取更多数据
    
    switch (currentType.value) {
      case 'recommend':
        response = await getRecommendRanking(limit)
        break
      case 'new-product':
        response = await getNewProductRanking(limit)
        break
      case 'value':
        response = await getValueRanking(limit)
        break
      default:
        response = await getRecommendRanking(limit)
    }

    if (response && (response.code === 200 || response.code === 0)) {
      rankingList.value = Array.isArray(response.data) ? response.data : []
    } else {
      error.value = response?.message || '加载失败'
    }
  } catch (err) {
    console.error('加载榜单失败:', err)
    error.value = '网络请求失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

const viewProduct = (item) => {
  router.push(`/iteminfo/${item.productId}`)
}

watch(() => route.query.type, (newType) => {
  if (newType && newType !== currentType.value) {
    currentType.value = newType
    loadRanking()
  }
})

onMounted(() => {
  loadRanking()
})
</script>

<style scoped>
.ranking-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40px;
}

.page-header {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.back-btn {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: #666;
  margin-right: 20px;
  padding: 8px 16px;
  border-radius: 4px;
}

.back-btn:hover {
  background: #f0f0f0;
}

.header-content h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.ranking-container {
  max-width: 1200px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
  padding: 0 20px;
}

.ranking-sidebar {
  width: 240px;
  background: white;
  border-radius: 12px;
  padding: 12px;
  height: fit-content;
  position: sticky;
  top: 80px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s;
  color: #666;
}

.sidebar-item:hover {
  background: #f5f5f5;
}

.sidebar-item.active {
  background: #e3f2fd;
  color: #1976d2;
  font-weight: bold;
}

.sidebar-item .icon {
  font-size: 24px;
  margin-right: 12px;
}

.ranking-content {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 24px;
  min-height: 600px;
}

.content-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

.content-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.update-time {
  margin-left: 12px;
  font-size: 12px;
  color: #999;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.ranking-item:hover {
  border-color: #1976d2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.rank-badge {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
  color: #999;
  font-style: italic;
}

.rank-1 { color: #ffd700; font-size: 28px; }
.rank-2 { color: #c0c0c0; font-size: 24px; }
.rank-3 { color: #b87333; font-size: 24px; }

.item-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 20px;
  border: 1px solid #f0f0f0;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.platform-tag {
  font-size: 12px;
  background: #f5f5f5;
  color: #666;
  padding: 2px 6px;
  border-radius: 4px;
}

.score-tag {
  font-size: 12px;
  color: #ff9800;
  background: #fff3e0;
  padding: 2px 6px;
  border-radius: 4px;
}

.item-price {
  font-size: 20px;
  color: #e53935;
  font-weight: bold;
}

.view-btn {
  padding: 8px 16px;
  border: 1px solid #1976d2;
  color: #1976d2;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.ranking-item:hover .view-btn {
  background: #1976d2;
  color: white;
}

.loading-state, .error-state, .empty-state {
  text-align: center;
  padding: 60px 0;
  color: #666;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #1976d2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
